<template>
  <div class="home">
    <p class="box">这是我的第一个组件</p>
    <h1>个人信息</h1>
    <!-- 使用组件 -->
    <!-- 把父组件数据给子组件 -->
    <user-info :text_title="text_title" :people_info="userObj" @set-user-name='getUser'></user-info>
    <user-info :text_title="text" :people_info="userObj2" @set-user-name='getUser'></user-info>
  </div>
</template>

<script>
// 导入组件
import user from "../components/user.vue";
export default {
  name: "HomeView",
  data() {
    return {
     text_title: "这是第一条数据",
      // userObj:[
      //   {
      //     id:1,
      //     name:'小明',
      //     age:18
      //   },
      //   {
      //     id:2,
      //     name:'小磊',
      //     age:18
      //   },
      //   {
      //     id:3,
      //     name:'小红',
      //     age:18
      //   }
      // ]
      userObj: {
        id: 1,
        name: "小明",
        age: 18,
      },
      text:'这是第二条数据',
      userObj2:{
        id: 2,
        name:"小红",
        age:18
      }
    };
  },
  // 注册组件
  components: {
    userInfo: user,
  },
  // 在里面写方法
  mounted() {
    //this指向vue构造函数
    let {vm} = {vm:this}
    setTimeout(() => {
      vm.userObj.name='小青'
    }, 1000);
     },
    //  在里面写事件
     methods: {
      getUser(data){
        console.log(data);
      }
     },
  }

;
</script>
